﻿<template>
    <view class="memberBox">
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar leftIcon="search" title="会员中心" safeAreaInsetTop fixed placeholder @leftClick="goSearch"></u-navbar>

        <view class="headBox coreshop-bg-green">
            <!--标题栏-->
            <!--小程序端不显示-->
            <!--用户信息-->
            <view class="user-info-box">
                <!--未登陆-->
                <view class="login-user-view" v-if="!hasLogin">
                    <!-- #ifdef APP-PLUS -->
                    <view class="login-user-avatar-view">
                        <u-avatar :src="$store.state.config.shopLogo" size="60"></u-avatar>
                    </view>
                    <u-button type="default" size="mini" @click="toLogin()">立即登录</u-button>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <view class="login-user-avatar-view">
                        <view class="account-face grace-box-shadow">
                            <open-data type="userAvatarUrl"></open-data>
                        </view>
                    </view>
                    <u-button type="default" size="mini" @click="goLogin()">立即登录</u-button>
                    <!-- #endif -->
                    <!-- #ifdef MP-ALIPAY -->
                    <view class="login-user-avatar-view">
                        <u-avatar :src="userInfo.avatarImage" size="large"></u-avatar>
                    </view>
                    <u-button type="default" size="mini" @click="goLogin()">立即登录</u-button>
                    <!-- #endif -->
                </view>

                <!--已登陆-->
                <view v-else>
                    <view class="coreshop-flex user-box coreshop-padding-left-15 coreshop-padding-right-10 coreshop-padding-bottom-30 coreshop-flex-direction-row">
                        <view class="coreshop-margin-right-10  coreshop-padding-top-20">
                            <u-avatar :src="userInfo.avatarImage" size="48"></u-avatar>
                        </view>
                        <view class="coreshop-flex-1  coreshop-padding-top-10  coreshop-padding-bottom-5  coreshop-padding-right-10">
                            <view class="coreshop-font-17 coreshop-padding-bottom-10  coreshop-flex-direction-row">
                                <text class="coreshop-margin-right-10">{{ userInfo.nickName }}</text>
                            </view>
                            <view class="coreshop-font-12 coreshop-padding-bottom-10 coreshop-flex-direction-row">
                                <text class="text-border-x">编号：{{ userInfo.id }}</text>
                                <text>等级：{{ userInfo.gradeName }}</text>
                            </view>
                            <view class="coreshop-font-12 coreshop-flex-direction-row">
                                <text class="text-border-x">{{pointShowName}}：{{ userInfo.point }}</text>
                                <text>余额：{{ userInfo.balance }}</text>
                            </view>
                        </view>
                        <!-- #ifndef MP-WEIXIN -->
                        <view class="coreshop-margin-left-10 coreshop-padding-10">
                            <u-icon name="scan" color="#fff" size="16"></u-icon>
                        </view>
                        <view class="coreshop-margin-left-10 coreshop-padding-10" @tap="navigateToHandle('/pages/member/setting/userInfo/index')">
                            <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
                        </view>
                        <!-- #endif -->
                        <!-- #ifdef MP-WEIXIN -->
                        <view class="coreshop-margin-left-10 coreshop-padding-10" @tap="navigateToHandle('/pages/member/setting/userInfo/index')">
                            <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
                        </view>
                        <!-- #endif -->

                    </view>
                </view>
            </view>

            <!--用户数据-->

            <view class="user-info-num-box">

                <u-row customStyle="margin-bottom: 10px">
                    <u-col :span="userInfoNavSpan" @tap="navigateToHandle('/pages/member/history/index')" textAlign="center">
                        <view class="coreshop-font-18" v-if="!hasLogin">-</view>
                        <view class="coreshop-font-18" v-else>{{ userInfo.footPrintCount }}</view>
                        <text class="coreshop-font-11">足迹</text>
                    </u-col>
                    <u-col :span="userInfoNavSpan" @tap="navigateToHandle('/pages/member/coupon/index')" textAlign="center" v-if="config.showCoupon == 1">
                        <view class="coreshop-font-18" v-if="!hasLogin">-</view>
                        <view class="coreshop-font-18" v-else>{{ userInfo.userCouponCount }}</view>
                        <text class="coreshop-font-11">优惠券</text>
                    </u-col>
                    <u-col :span="userInfoNavSpan" @tap="navigateToHandle('/pages/member/collection/index')" textAlign="center">
                        <view class="coreshop-font-18" v-if="!hasLogin">-</view>
                        <view class="coreshop-font-18" v-else>{{ userInfo.collectionCount }}</view>
                        <text class="coreshop-font-11">收藏</text>
                    </u-col>
                    <u-col :span="userInfoNavSpan" @tap="navigateToHandle('/pages/member/afterSales/list/list')" textAlign="center">
                        <view class="coreshop-font-18" v-if="!hasLogin">-</view>
                        <view class="coreshop-font-18" v-else>{{afterSaleNums || 0}}</view>
                        <text class="coreshop-font-11">售后</text>
                    </u-col>
                </u-row>
            </view>
        </view>

        <view class="coreshop-view-content">
            <!--用户数据-->
            <view class="coreshop-padding-10 coreshop-bg-white coreshop-user-info-order-box">
                <view class="coreshop-text-black coreshop-font-lg coreshop-text-bold coreshop-padding-10">我的交易</view>
                <u-grid :col="5" :border="false">
                    <u-grid-item v-for="(item, index) in orderItems" :key="index" @click="orderNavigateHandle('/pages/member/order/index/index', index)">
                        <view class="transactionNumber" v-if="hasLogin">{{ item.nums }}</view>
                        <u-icon :name="item.icon" :size="25" v-else></u-icon>
                        <view class="grid-text">{{ item.name }}</view>
                    </u-grid-item>
                </u-grid>
            </view>

            <!--天天有钱-->
            <view class="coreshop-padding-10 coreshop-bg-white coreshop-margin-top-15 coreshop-user-info-money-box" v-if="other.invite.showItem">
                <view class="coreshop-text-black coreshop-font-lg coreshop-text-bold coreshop-padding-10">天天有钱</view>
                <view class="money-col">
                    <u-row gutter="16">
                        <u-col span="6">
                            <view class="money-item">
                                <view class="money-item-view coreshop-flex-direction-row" @click="navigateToHandle('/pages/member/invite/index')">
                                    <view class="money-avatar coreshop-avatar lg yqhy" />
                                    <view class="money-content">
                                        <view class="coreshop-text-black u-line-1">边逛边赚钱</view>
                                        <view class="coreshop-text-gray coreshop-font-sm u-line-1">最高提现20元</view>
                                    </view>
                                </view>
                            </view>
                        </u-col>
                        <u-col span="6">
                            <view class="money-item">
                                <view class="money-item-view coreshop-flex-direction-row" @click="navigateToHandle('/pages/member/invite/index')">
                                    <view class="money-avatar coreshop-avatar lg yqhy2" />
                                    <view class="money-content">
                                        <view class="coreshop-text-black u-line-1">邀请好友</view>
                                        <view class="coreshop-text-gray coreshop-font-sm u-line-1">最高分红50000</view>
                                    </view>
                                </view>
                            </view>
                        </u-col>
                    </u-row>
                </view>
            </view>

            <!--我的服务-->
            <view class="coreshop-padding-top-10 coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-bottom-30 coreshop-bg-white coreshop-margin-top-15 coreshop-user-info-tools-box">
                <view class="coreshop-padding-10 tools-view">
                    <view class="coreshop-text-black coreshop-text-bold coreshop-font-lg tools-title">我的服务</view>
                </view>
                <view class="coreshop-tools-list-box">
                    <u-grid :col="4" :border="false">
                        <u-grid-item @click="goMerchant" v-if="isClerk">
                            <u-icon name="calendar" :size="25" color="#666" label="商家管理" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                        <u-grid-item @tap="goDistributionPanel" v-if="isDistribution">
                            <u-icon name="wifi" :size="25" color="#666" label="分销中心" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                        <u-grid-item @tap="goAgentPanel" v-if="isAgent">
                            <u-icon name="list" :size="25" color="#666" label="代理中心" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                        <u-grid-item v-for="(item,i) in utilityMenus" :key="i" v-if="(item.showItem && i != 'invoice') || (item.showItem && i == 'invoice' && InvoiceSwitch == 1)" @click="navigateToHandle(item.router)">
                            <u-icon :name="item.icon" :size="25" color="#666" :label="item.name" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                    </u-grid>

                </view>
            </view>

            <!--增值业务-->
            <view class="coreshop-padding-top-10 coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-bottom-30 coreshop-bg-white coreshop-margin-top-15 coreshop-user-info-tools-box" v-if="showVas">
                <view class="coreshop-padding-10 tools-view">
                    <view class="coreshop-text-black coreshop-text-bold coreshop-font-lg tools-title">增值业务</view>
                </view>
                <view class="coreshop-tools-list-box">
                    <u-grid :col="4" :border="false">
                        <u-grid-item v-for="(item,i) in vas" :key="i" v-if="item.showItem" @click="goRoute(item.router)">
                            <u-icon :name="item.icon" :size="25" color="#666" :label="item.name" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>

            <!--其他-->
            <view class="coreshop-padding-top-10 coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-bottom-30 coreshop-bg-white coreshop-margin-top-15 coreshop-user-info-tools-box">
                <view class="coreshop-padding-10 tools-view">
                    <view class="coreshop-text-black coreshop-text-bold coreshop-font-lg tools-title">其他</view>
                </view>
                <view class="coreshop-tools-list-box">

                    <u-grid :col="4" :border="false">
                        <u-grid-item @click="goNoticeList()">
                            <u-icon name="info-circle" :size="25" color="#666" label="通知公告" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>

                        <u-grid-item @click="goArticleList()">
                            <u-icon name="question-circle" :size="25" color="#666" label="帮助中心" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>

                        <u-grid-item v-for="(item,i) in other" :key="i" v-if="item.showItem" @click="navigateToHandle(item.router)">
                            <u-icon :name="item.icon" :size="25" color="#666" :label="item.name" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                        <!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
                        <u-grid-item @click="showChat">
                            <u-icon name="server-man" :size="25" color="#666" label="联系客服" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                        <!-- #endif -->
                        <!-- #ifdef MP-WEIXIN -->
                        <!-- todo:: 微信客服 -->
                        <!-- #endif -->
                        <u-grid-item @click="clearCache">
                            <u-icon name="trash" :size="25" color="#666" label="清除缓存" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                        <u-grid-item @click="logOff">
                            <u-icon name="arrow-downward" :size="25" color="#666" label="注销登录" labelPos="bottom" labelSize="13" space="25" top="15"></u-icon>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>

        </view>

        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>

<script>

    import { mapState } from 'vuex';

    export default {

        data() {
            return {
                afterSaleNums: 0, //售后数量
                isClerk: false,//是否门店人员
                isShopManager: false,//是否商家管理员
                storeId: 0,//关联门店

                isDistribution: false,//显示分销中心
                isAgent: false,//显示代理中心

                config: '',//配置信息
                orderItems: [
                    {
                        name: '全部',
                        icon: 'order',
                        nums: 0
                    }, {
                        name: '待付款',
                        icon: 'order',
                        nums: 0
                    },
                    {
                        name: '待发货',
                        icon: 'order',
                        nums: 0
                    },
                    {
                        name: '待收货',
                        icon: 'order',
                        nums: 0
                    },
                    {
                        name: '待评价',
                        icon: 'order',
                        nums: 0
                    }
                ],
                utilityMenus: {
                    myCoupon: {
                        name: '我的优惠券',
                        icon: 'coupon',
                        router: '/pages/member/coupon/index',
                        showItem: true
                    },
                    myBalance: {
                        name: '我的余额',
                        icon: 'rmb-circle',
                        router: '/pages/member/balance/index/index',
                        showItem: true
                    },
                    myInvoice: {
                        name: '我的发票',
                        icon: 'calendar',
                        router: '/pages/member/invoice/index',
                        showItem: false
                    },
                    myServices: {
                        name: '我的服务卡',
                        icon: 'bell',
                        router: '/pages/member/serviceOrder/index/index',
                        showItem: false
                    },
                    myIntegral: {
                        name: '我的' + (this.$store.state.config.pointShowName || '积分'),
                        icon: 'integral',
                        router: '/pages/member/integral/index',
                        showItem: true
                    },
                    myAddress: {
                        name: '地址管理',
                        icon: 'map',
                        router: '/pages/member/address/list/list',
                        showItem: true
                    },
                    myCollection: {
                        name: '我的收藏',
                        icon: 'bookmark',
                        router: '/pages/member/collection/index',
                        showItem: true
                    },
                    myHistory: {
                        name: '我的足迹',
                        icon: 'bag',
                        router: '/pages/member/history/index',
                        showItem: true
                    },
                },
                showVas: false,
                vas: {
                    storeMap: {
                        name: '门店列表',
                        icon: 'home',
                        router: '/pages/storeMap/storeMap',
                        showItem: false
                    },
                    servicePackage: {
                        name: '服务商品',
                        icon: 'list-dot',
                        router: '/pages/serviceGoods/index/index',
                        showItem: false
                    },
                    coupons: {
                        name: '优惠券',
                        icon: 'red-packet',
                        router: '/pages/coupon/coupon',
                        showItem: false
                    },
                    pinTuan: {
                        name: '拼团',
                        icon: 'grid',
                        router: '/pages/activity/pinTuan/list/list',
                        showItem: false
                    },
                    seckill: {
                        name: '秒杀',
                        icon: 'clock',
                        router: '/pages/activity/seckill/list/list',
                        showItem: false
                    },
                    groupBuying: {
                        name: '团购',
                        icon: 'trash',
                        router: '/pages/activity/groupBuying/list/list',
                        showItem: false
                    },
                    solitaire: {
                        name: '接龙',
                        icon: 'bag',
                        router: '/pages/activity/solitaire/list/list',
                        showItem: false
                    },
                    calendar: {
                        name: '签到',
                        icon: 'calendar',
                        router: '/pages/activity/checkIn/checkIn/checkIn',
                        showItem: false
                    },
                    customForm: {
                        name: '万能表单',
                        icon: 'file-text',
                        router: '/pages/form/list/list',
                        showItem: false
                    },
                    livebroadcast: {
                        name: '直播',
                        icon: 'play-circle',
                        router: '/pages/livebroadcast/index/index',
                        showItem: false
                    },
                },
                other: {
                    invite: {
                        name: '邀请好友',
                        icon: 'man-add',
                        router: '/pages/member/invite/index',
                        showItem: false
                    },
                    search: {
                        name: '商品检索',
                        icon: 'search',
                        router: '/pages/search/search',
                        showItem: true
                    },
                    setting: {
                        name: '系统设置',
                        icon: 'setting',
                        router: '/pages/member/setting/index/index',
                        showItem: true
                    }
                },
                list: 2,
                suTipStatus: false,
                opacity: 0,
                userInfoNavSpan: 3,
            }
        },
        onShow() {
            this.initData()
        },
        computed: {
            ...mapState({
                hasLogin: state => state.hasLogin,
                userInfo: state => state.userInfo,
            }),
            InvoiceSwitch() {
                return this.$store.state.config.invoiceSwitch || 2;
            },
            hasLogin: {
                get() {
                    return this.$store.state.hasLogin;
                },
                set(val) {
                    this.$store.commit('hasLogin', val);
                }
            },
            userInfo: {
                get() {
                    return this.$store.state.userInfo;
                },
                set(val) {
                    this.$store.commit('userInfo', val);
                }
            },
            pointShowName() { return this.$store.state.config.pointShowName },
        },
        methods: {
            // 退出登录
            logOff() {
                var that = this;
                this.$common.modelShow('退出', '确认退出登录吗?', () => {
                    that.$store.commit('hasLogin', false);
                    that.$store.commit('userInfo', "");
                    that.$db.del('userToken')
                    uni.reLaunch({
                        url: '/pages/index/default/default'
                    })
                })
            },
            // 清除缓存
            clearCache() {
                // 重新获取统一配置信息
                this.$u.api.shopConfigV2().then(res => {
                    this.$store.commit('config', res.data)
                })
                //获取地区信息
                this.$u.api.getAreaList().then(res => {
                    if (res.status) {
                        // 删除地区缓存信息
                        this.$db.del('areaList');
                        this.$db.set('areaList', res.data)
                    }
                });
                this.$refs.uToast.show({ message: '清除成功', type: 'success' })
                uni.reLaunch({
                    url: '/pages/index/default/default'
                })
            },

            goAgentPanel() {
                var _this = this;
                uni.showLoading({
                    title: '跳转中...'
                });
                _this.$u.api.getAgentInfo().then(res => {
                    if (res.status) {
                        _this.condition = res.data;
                        if (_this.condition.verifyStatus == 1 || (!_this.condition.needApply && _this.conditionStatus)) {
                            _this.$u.route('/pages/member/agent/panel/panel');
                        } else if (_this.condition.verifyStatus > 1) {
                            _this.$u.route('/pages/member/agent/applyState/applyState');
                        } else {
                            _this.$u.route('/pages/member/agent/index/index');
                        }
                    } else {
                        //报错了
                        _this.$u.toast(res.msg);
                    }
                });
                uni.hideLoading();
            },
            goDistributionPanel() {
                var _this = this;
                uni.showLoading({
                    title: '跳转中...'
                });
                _this.$u.api.getDistributionInfo().then(res => {
                    if (res.status) {
                        _this.condition = res.data;
                        if (_this.condition.hasOwnProperty('verifyStatus')) {
                            if (_this.condition.verifyStatus == 1 || (!_this.condition.needApply && _this.conditionStatus)) {
                                _this.$u.route({ url: '/pages/member/distribution/panel/panel' });
                            } else if (_this.condition.verifyStatus > 1) {
                                _this.$u.route({ url: '/pages/member/distribution/applyState/applyState' });
                            } else {
                                _this.$u.route({ url: '/pages/member/distribution/index/index' });
                            }
                        }
                    } else {
                        //报错了
                        _this.$u.toast(res.msg);
                    }
                });
                uni.hideLoading();
            },
            goLogin() {
                this.$store.commit('showLoginTip', true);
                //getApp().globalData.showLoginTip = true;
            },
            toLogin() {
                this.$u.route({ url: '/pages/login/loginBySMS/loginBySMS' });
            },
            initData() {
                var _this = this
                //判断是开启分销还是原始推广
                this.config = this.$store.state.config;
                //分销中心
                _this.isDistribution = this.config.openDistribution == 1;
                //代理中心
                _this.isAgent = this.config.isOpenAgent == 1 && this.config.isShowAgentPortal == 1;
                //邀请好友
                _this.other.invite.showItem = this.config.showInviter == 1;
                //显示营销功能
                _this.showVas = this.config.showVas == 1;
                //门店展示列表
                _this.vas.storeMap.showItem = _this.config.showStoresSwitch == 1;
                //服务商品
                _this.vas.servicePackage.showItem = _this.config.showServicePackage == 1;
                _this.utilityMenus.myServices.showItem = _this.config.showServicePackage == 1;
                //优惠券
                _this.vas.coupons.showItem = _this.config.showCoupon == 1;
                _this.utilityMenus.myCoupon.showItem = _this.config.showCoupon == 1;
                _this.userInfoNavSpan = _this.config.showCoupon == 1 ? 3 : 4;
                //拼团
                _this.vas.pinTuan.showItem = _this.config.showPinTuan == 1;
                //秒杀
                _this.vas.seckill.showItem = _this.config.showSeckill == 1;
                //团购
                _this.vas.groupBuying.showItem = _this.config.showGroupBuying == 1;
                //接龙
                _this.vas.solitaire.showItem = _this.config.showSolitaire == 1;
                //签到
                _this.vas.calendar.showItem = _this.config.showCalendar == 1;
                //自定义表单
                _this.vas.customForm.showItem = _this.config.showCustomForm == 1;
                //是否显示直播
                _this.vas.livebroadcast.showItem = _this.config.showLiveBroadCast == 1;
                //显示我的发票
                _this.utilityMenus.myInvoice.showItem = _this.config.invoiceSwitch == 1;
                //获取用户信息
                _this.getUserInfo();
            },
            getUserInfo() {
                var _this = this
                if (this.$db.get('userToken')) {
                    this.hasLogin = true
                    this.$u.api.userInfo().then(res => {
                        if (res.status) {
                            _this.userInfo = res.data
                            // 获取订单不同状态的数量
                            let data = {
                                ids: '0,1,2,3,4',
                                isAfterSale: true
                            }
                            _this.$u.api.getOrderStatusSum(data).then(res => {
                                if (res.status) {
                                    _this.orderItems.forEach((item, key) => {
                                        item.nums = res.data[key]
                                    })
                                    _this.afterSaleNums = res.data['isAfterSale'];
                                }
                            })
                            //判断是否是店员
                            _this.$u.api.isStoreUser().then(res => {
                                this.isClerk = res.data.isClerk;
                                this.isShopManager = res.data.isShopManager
                                this.storeId = res.data.storeId;
                            })
                        } else {
                            this.hasLogin = false;
                            this.userInfo = null;
                        }
                    })
                } else {
                    this.hasLogin = false
                }
            },
            goMerchant() {
                uni.showLoading({
                    title: '跳转中...'
                });
                if (!this.hasLogin) {
                    console.log('未登录');
                    this.$store.commit('showLoginTip', true);
                    uni.hideLoading();
                    return false;
                }
                uni.hideLoading();
                this.$u.route({
                    url: '/pages/member/merchant/index/index',
                    params: {
                        storeId: this.storeId,
                        isShopManager: this.isShopManager
                    }
                })
            },
            navigateToHandle(pageUrl) {
                uni.showLoading({
                    title: '跳转中...'
                });
                if (!this.hasLogin) {
                    console.log('未登录');
                    this.$store.commit('showLoginTip', true);
                    uni.hideLoading();
                    return false;
                }
                uni.hideLoading();
                this.$u.route(pageUrl)
            },
            orderNavigateHandle(url, tab = 0) {
                if (!this.hasLogin) {
                    this.$store.commit('showLoginTip', true);
                    return false;
                }
                this.$store.commit('orderTab', tab)
                this.$u.route(url + '?swiperCurrentIndexId=' + tab);
            },
            //在线客服
            showChat() {
                // #ifdef APP-PLUS || APP-PLUS-NVUE
                this.$u.route('/pages/member/customerService/index');
                // #endif
            }
        },
        watch: {
            hasLogin() {
                if (this.hasLogin == true) {
                    this.getUserInfo();
                }
            }
        },
        //分享
        onShareAppMessage(res) {
            return {
                title: this.$store.state.config.shareTitle,
                imageUrl: this.$store.state.config.shareImage,
                path: this.shareUrl
            }
        },
        onShareTimeline(res) {
            return {
                title: this.$store.state.config.shareTitle,
                imageUrl: this.$store.state.config.shareImage,
                path: this.shareUrl
            }
        },
    }
</script>
<style lang="scss" scoped>
    @import 'member.scss';
</style>
